<nz-drawer
  [nzClosable]="true"
  [nzVisible]="show"
  [nzPlacement]="'right'"
  [nzTitle]="teamDrawerTitle"
  [nzContent]="teamDrawerContent"
  (nzOnClose)="close()"
  [nzWidth]="900"
></nz-drawer>

<ng-template #teamDrawerTitle>
  <div class="d-flex align-items-center w-100">
    <p class="mb-0">
      <span nz-icon [nzType]="'bank'" [nzTheme]="'outline'" class="ms-2"></span>
      {{team?.name}}
    </p>
    <div class="ms-auto">
      <nz-space>
        <button *nzSpaceItem nz-button [nzType]="'primary'"  nz-dropdown [nzDropdownMenu]="exportDropdown" [nzPlacement]="'bottomRight'" [nzLoading]="exporting">
          导出 <span nz-icon [nzType]="'down'"></span>
        </button>
        <nz-dropdown-menu #exportDropdown="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="exportProjects()">项目</li>
            <li nz-menu-item (click)="exportMembers()">成员</li>
          </ul>
        </nz-dropdown-menu>
      </nz-space>
    </div>
  </div>
</ng-template>

<ng-template #teamDrawerContent>
  <ng-container *ngIf="team; else invalidTeam">
    <nz-tabset [nzType]="'card'">
      <nz-tab [nzTitle]="'概览'">
        <worklenz-rpt-team-overview [teamId]="team.id"></worklenz-rpt-team-overview>
      </nz-tab>
      <nz-tab [nzTitle]="'项目 (' + projectsLength + ')'">
        <worklenz-rpt-team-drawer-projects
          [teamId]="team.id"
          (length)="projectsLength = $event"
          (selectProject)="openProject($event)"
        ></worklenz-rpt-team-drawer-projects>
      </nz-tab>
      <nz-tab [nzTitle]="'成员 (' + membersLength + ')'">
        <worklenz-rpt-team-drawer-members
          [teamId]="team.id"
          (length)="membersLength = $event"
          (selectMember)="openMember($event, null)"
        ></worklenz-rpt-team-drawer-members>
      </nz-tab>
    </nz-tabset>
  </ng-container>
</ng-template>

<ng-template #invalidTeam>
  <strong class="text-center">无效的团队。请重新加载页面并重试。</strong>
</ng-template>
